<template>
	<view class="activityDetails">
		<view class="con1">
			<view class="con1-title"> 店名： </view>
			<image class="con1-logo" src="../static/img/logo.png" mode=""></image>
			<text style="font-size: 36rpx;font-weight: 500;">超圳</text>
			<input class="con1-input" type="text" v-model="formData.name" placeholder="请输入店铺名" value="" maxlength="5"/>
			<text style="font-size: 36rpx;font-weight: 500;">商行</text>
		</view>
		<view class="con1">
			<view class="con1-title"> No： </view>
			<text style="font-size: 36rpx;font-weight: 500;">{{formData.no}}</text>
		</view>
		<view class="con1" style="border: 0;padding-bottom: 0rpx;">
			<view class="con1-title"> 店铺广告语： </view>
		</view>
		<view class="con1" style="display: block;padding-top: 0rpx;border-bottom: 2rpx solid #ededed;">
			<view class="" style="font-size: 28rpx; margin-top: 20rpx; color: #7b7b7b;"> 限制20个字符 </view>
			<textarea class="bz-text" v-model="formData.region" value="" placeholder=" 请输入店铺广告语" maxlength="20"/>
		</view>
		<view class="con3" v-if="reductionList.length > 0">
			<view class="con3-fixed" v-for="(item,index) in reductionList" :key="index">
				<view class="con3-left"><text style="color:#DD524D;">满￥{{item.satisfyMoney}}</text> 减免套餐</view>
				<view class="con3-right"> 
					<view class="con3-right-c">
						<view class="con3-ri-ti"> 优惠一: </view>
						<view class="con3-ri-num"> {{item.rule_0}} </view>
					</view>
					<view class="con3-right-c">
						<view class="con3-ri-ti"> 优惠二: </view>
						<view class="con3-ri-num"> {{item.rule_1}} </view>
					</view>
					<view class="con3-right-c">
						<view class="con3-ri-ti"> 优惠三: </view>
						<view class="con3-ri-num"> {{item.rule_2}} </view>
					</view>
				</view>
			</view>
			<view class="con3-p"> 如需更换套餐，请联系工作人员。 </view>
		</view>
		
		<view class="heng"></view>
		<view class="deal">
			<view :class="isclick?'sel':'nosel'" @click="isclick = !isclick"></view>
			<text @click="isclick = !isclick">已阅读，并同意</text>
			<text @click="jump('agreement', 'cz_explant')">《超圳商行开通协议》</text>
		</view>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="but" @click="apply()">确定绑定</view>
		</view>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	var _self;
	export default {
		data() {
			return {
				isclick: false,
				bottomHeight: 110,
				formData:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					id: 0,
					name: '',
					no: '',
					region: '',
				},
				reductionList: [],
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/index/info',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: _self.formData.id,
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('return_one');
								}, 2000) 
							}
						});
						return ;
					} 
					_self.formData.name = res.data.name;
					_self.formData.no = res.data.no;
					_self.formData.region = res.data.region;
					_self.reductionList = res.data.reductionList;
				});
			},
			apply(){
				if(this.formData.name == ''){
					uni.showToast({
						title: "请填写店铺名",
						icon: 'none'
						
					});
				}
				if(this.formData.no == 0){
					uni.showToast({
						title: "请选填NO",
						icon: 'none'
						
					});
				}
				if(!this.isclick) {
					uni.showToast({
					    title: "请勾选同意协议",
					    icon: 'none'
					});
					return ;
				}
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				serve.request({
					url: '/spread/index/edit-bind',
					data: _self.formData
				}).then(res => {
					if(res.code == 200) {
						uni.redirectTo({
							url: '/business/spread_main?id='+res.data.mainId
						});
						return ;
					} 
					uni.showToast({
						title: res.message,
						icon : 'none'
					});
				});
				return ;
			}
		},
		onLoad(options) {
			_self = this;
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
			_self.formData.id = options.id || 0;
			if(_self.formData.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('return_one');
						}, 2000) 
					}
				});
			}
		},
		onShow() {
			_self.formData["access-token"] = uni.getStorageSync('access-token');
			_self.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	.con1{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #ededed;
	}
	.con1-title{
		margin-right: 30rpx;
	}
	.con1-logo{
		width: 66rpx;
		height: 66rpx;
		margin-right: 10rpx;
	}
	.con1-input{
		    border: 2rpx solid #dedede;
		    height: 60rpx;
		    width: 250rpx;
		    padding: 0 18rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
	}
	.con1-input-ggy{
		border: 2rpx solid #dedede;
		height: 60rpx;
		width: 390rpx;
		padding: 0 18rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.con2{
		border-bottom: 2rpx solid #ededed;
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.con2-title{
		height: 60rpx;
		    line-height: 60rpx;
		    margin: 10rpx 20rpx 10rpx 0rpx;
		    text-align: left;
	}
	.con2-radio{
		height: 60rpx;
		width: 140rpx;
		display: flex;
		align-items: center;
		margin: 10rpx;
	}
	.h-bottom-box{
		    padding-top: 10rpx;
		width: 100%;
	}
	.h-bottom{
		    float: right;
		    color: #726cd4;
		    font-size: 30rpx;
		    text-decoration: underline;
		    margin-right: 10rpx;
	}
	
	.sel-box{
		margin-right: 12rpx;
	}
	.sel {
		background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
		background-repeat: no-repeat;
		width: 40rpx;
		height: 40rpx;
		background-size: 100%;
	}
					
	.nosel {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}
	
	.pay_type {
		position: relative;
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 140upx;
		max-height: 80vh;
	
		text {
			font-size: 42rpx;
		}
	
		.close {
			position: absolute;
			width: 23upx;
			height: 23upx;
			right: 40upx;
			top: 45upx;
		}
	
		.title {
			width: 100%;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			font-size: 36upx;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
		}
	
		.paypir {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			// padding: 20upx 0upx 20upx;
			font-size: 28upx;
	
			text:last-child {
				color: #FF5F60;
				font-size: 50upx;
				font-weight: bold;
				margin-top: 10upx;
			}
		}
	
		.line2 {
			width: 100%;
			box-sizing: border-box;
			padding: 36upx;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #333333;
			border-bottom: 1upx rgba(251, 251, 253, 1) solid;
	
			.txt {
				color: #999999;
			}
	
			.nosel {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 50%;
			}
	
			.sel {
				background-image: url(../static/img/check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
			.nocheck {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 20%;
			}
			
			.check {
				background: url(../static/img/checkbox_check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
		}
	
		.pay_bot {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 100upx;
			background: #FFBF0A;
			color: #fff;
			font-size: 32upx;
			line-height: 100upx;
			text-align: center;
			border-radius: 0;
	
			&::after {
				border: none;
			}
		}
	}
	
	
	

	
	
	.con3{padding: 20rpx 0;}
	.con3-fixed{    display: flex;
    justify-items: center;
    align-items: center;
    padding: 20rpx 0;}
	.con3-left{width: 200rpx;}
	.con3-right {padding-left: 40rpx;}
	.con3-right-c{display: flex;
    align-content: center;
    line-height: 60rpx;
    width: 400rpx;}
	.con3-ri-ti{}
	.con3-ri-num{margin-left: 60rpx;}
	.con3-p{color: #5a5a5a;}
	
	
	
	
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		    background: #FFBC00;
		    color: #fff;
		    border-radius: 0;
		    width: 100vw;
		    height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		    font-size: 36rpx;
	}
	.bz-text{
		border: 2rpx solid #ededed;
		padding: 10rpx;
		margin-top: 10rpx;
		width: 100%;
		height: 120rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		color: #333333;
	}
	
	.deal{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
		padding: 55upx 0upx;
		text:nth-child(2){
			color: #999999;
			margin-left: 11upx;
		}
		text:nth-child(3){
			color: #EB5938;
			margin-left: 11upx;
		}
		.sel {
			background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/icon37.png);
			background-repeat: no-repeat;
			width:30upx;
			height:30upx;
			background-size: 100%;
			margin-right: 20upx;
		}
		
		.nosel {
			width: 30upx;
			height: 30upx;
			border: 1upx solid #999999;
			border-radius: 50%;
			margin-right: 20upx;
		}
	}
</style>
